<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script type="text/javascript" src="./dist/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="./dist/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.css">
	<title></title>
</head>
<style type="text/css">
	*{margin:0;padding:0;}
	select{width:200px;height:600px;}
</style>
<body>
<h2 class='page-header'>下拉框内容选择</h2>
<form>
	<select id='s1' size='5'>
		<option>one</option>
		<option>two</option>
		<option>three</option>
		<option>four</option>
	</select>
	<input type="button" id="btn" value='>>'>
	<select id='s2' size='5'></select>
</form>
</body>
<script type="text/javascript">
$('#btn').click(function(){
	$('#s1 option:selected').clone().appendTo("#s2");
});
</script>
</html>